<template>
  <div class="divider" :class="direction">
    <div v-if="hasButton && currentIndex != 1" class="arrow-btn arrow-btn-1" @click="handleClick(1)"></div>
    <div v-if="hasButton && currentIndex != 2" class="arrow-btn arrow-btn-2" @click="handleClick(2)"></div>
  </div>
</template>
<script lang="ts" setup>
defineProps({
  direction: {
    type: String,
    default: 'horizontal',
  },
  hasButton: { type: Boolean, default: false },
  currentIndex: {
    type: Number,
    default: 0,
  },
})
const emit = defineEmits(['clickArrowButton'])

const handleClick = (type: number) => {
  emit('clickArrowButton', type)
}
</script>
<style scoped lang="scss">
.divider {
  position: relative;
  display: flex;
  &::before {
    position: absolute;
    content: '';
    display: block;
    background-color: #ebebeb;
  }
  &.vertical {
    width: 20px;
    &::before {
      top: 0%;
      left: 50%;
      width: 1px;
      height: 100%;
    }
    .arrow-btn {
      width: 10px;
      height: 60px;
      top: 50%;
      margin-top: -30px;

      &.arrow-btn-1 {
        left: 0;
        transform: translate(0%, -50%);
        border-radius: 5px 0 0 5px;
        background: url('/imgs/arrow-left-filling.png') 50% 50% no-repeat;
        background-size: 12px 12px;
      }
      &.arrow-btn-2 {
        right: 0;
        transform: translate(0%, 50%);
        border-radius: 0 5px 5px 0;
        background: url('/imgs/arrow-right-filling.png') 50% 50% no-repeat;
        background-size: 12px 12px;
      }
    }
  }
  &.horizontal {
    height: 20px;
    &::before {
      top: 50%;
      left: 0;
      width: 100%;
      height: 1px;
    }
    .arrow-btn {
      width: 60px;
      height: 10px;
      left: 50%;
      margin-left: -30px;
      &.arrow-btn-1 {
        top: 0%;
        transform: translate(-50%, 0);
        border-radius: 5px 5px 0 0;
        background: url('/imgs/arrow-up-filling.png') 50% 50% no-repeat;
        background-size: 12px 12px;
      }
      &.arrow-btn-2 {
        bottom: 0;
        transform: translate(50%, 0);
        border-radius: 0 0 5px 5px;
        background: url('/imgs/arrow-down-filling.png') 50% 50% no-repeat;
        background-size: 12px 12px;
      }
    }
  }
  .arrow-btn {
    position: absolute;
    font-size: 0;
    background-color: #555 !important;
    opacity: 0.2;
    color: #fff;
    line-height: 0;
    cursor: pointer;

    &:hover {
      transition: all 0.3s;
      opacity: 1;
    }
  }
}
</style>
